<html>
<head>
<meta charset="utf-8">
<!-- SEO -->
<meta name="description" content="">
<meta name="keywords" content="">
<title>图文并茂-GPC 游戏玩家的狂欢节</title>
<link rel="stylesheet" href="css/public.css" />
<style>
body{background-image: url(images/bg.jpg);}
.container{margin-top: 180px;}
.news-tabs{border-bottom: 2px solid #ECEAEA;}
.nt-item,.nt-item-active{width: 25%;height:70px;color: #FFF;font-size:26px;line-height:70px;text-align:center;background-color:#A66D6C;float:left;cursor:pointer}
.nt-item-active{color:#B9908F;background-color:#ECEAEA;}
.new-panels{margin-bottom:80px;}
.np-item,.np-item-active{padding:10px 20px;background-color:#FFF;display:none;}
.np-item-active{display:block;}
.np-link{padding:10px 0;position:relative;display:block;}
.np-box{width:100%;background-color:#000;background-color:rgba(0,0,0,0.5);position:absolute;left:0;bottom:10px;}
.np-border{margin:10px;}
.np-title{color:#FFF;font-size: 18px;margin:0;padding:0;}
.np-tag{color:#FFF;font-size:14px;padding: 5px 0;}
.np-info{float:right;}
.icon{width:28px;height:28px;background-image:url(images/d.png);}
.icon-good{height:24px;background-position: -12px -16px;position:relative;top:5px;display:inline-block}
.icon-msg{height:24px;background-position: -71px -15px;position:relative;top:8px;display:inline-block}
.icon-time{width:19px;height:19px;margin-right:10px;position:relative;top:4px;}
.np-info .icon{margin: 0 5px;margin-top:-10px;}
.np-text{color:#FFF;font-size:12px;}
</style>
</head>
<body>
	<!-- 头部 -->
	<div class="header">
		<img class="web-logo" src="images/logo.png"/>
		<div class="user-bar">
			<img class="ub-img" src="images/r.png" />
			<span>亲爱的玩家，您可以</span>
			<a href="http://www.baidu.com/">登录</a>
			<span>或者</span>
			<a href="http://www.baidu.com/">注册</a>
			</div>
		<div class="header-nav clear">
			<a class="header-item" href="index.html">
				<span class="text">首页</span>
				<span class="subText">Home</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">新闻</span>
				<span class="subText">News</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">视频</span>
				<span class="subText">Video</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">攻略</span>
				<span class="subText">Raiders</span>
			</a>
			<a class="header-item" href="javascript:;">
				<span class="text">图文并茂</span>
				<span class="subText">Photo And Title</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">博文故事</span>
				<span class="subText">Story</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">GPC联赛</span>
				<span class="subText">League Match</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">论坛</span>
				<span class="subText">Forum</span>
			</a>
		</div>
	</div>
	<div class="container">
		<img class="banner-img" src="images/news_top.png" />
		<div class="label-box" style="padding:20px 0;">
			<h1 class="lb-title" style="font-size:14px;">首页 > 图文并茂</h1>
		</div>
		<ul class="news-tabs clear">
			<li class="nt-item-active">综合</li>
			<li class="nt-item">公告</li>
			<li class="nt-item">赛事</li>
			<li class="nt-item">更新</li>
		</ul>
		<ul class="new-panels">
			<li class="np-item-active">
				<a class="np-link" href="http://www.baidu.com/">
					<img class="banner-img" src="images/slides/slides1.jpg" />
					<div class="np-box">
						<div class="np-border">
							<h2 class="np-title text-notWarp">标题：房管局的时刻牢记的疯狂拉升（字号18）</h2>
							<div class="np-tag">
								<p class="np-info">
									<span><i class="icon icon-good"></i>888</span>
									<span><i class="icon icon-msg"></i>999</span>
								</p>
								<p><img class="icon icon-time" src="images/s_03.png"/>2015-06-19(字号14)</p>
							</div>
							<p class="np-text text-warp">正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）</p>
						</div>
					</div>
				</a>
			</li>
			<li class="np-item">
				<a class="np-link" href="http://www.baidu.com/">
					<img class="banner-img" src="images/slides/slides1.jpg" />
					<div class="np-box">
						<div class="np-border">
							<h2 class="np-title text-notWarp">标题：房管局的时刻牢记的疯狂拉升（字号18）</h2>
							<div class="np-tag">
								<p class="np-info">
									<span><i class="icon icon-good"></i>888</span>
									<span><i class="icon icon-msg"></i>999</span>
								</p>
								<p><img class="icon icon-time" src="images/s_03.png"/>2015-06-19(字号14)</p>
							</div>
							<p class="np-text text-warp">正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）</p>
						</div>
					</div>
				</a>
				<a class="np-link" href="http://www.baidu.com/">
					<img class="banner-img" src="images/slides/slides1.jpg" />
					<div class="np-box">
						<div class="np-border">
							<h2 class="np-title text-notWarp">标题：房管局的时刻牢记的疯狂拉升（字号18）</h2>
							<div class="np-tag">
								<p class="np-info">
									<span><i class="icon icon-good"></i>888</span>
									<span><i class="icon icon-msg"></i>999</span>
								</p>
								<p><img class="icon icon-time" src="images/s_03.png"/>2015-06-19(字号14)</p>
							</div>
							<p class="np-text text-warp">正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）</p>
						</div>
					</div>
				</a>
			</li>
			<li class="np-item">
				<a class="np-link" href="http://www.baidu.com/">
					<img class="banner-img" src="images/slides/slides1.jpg" />
					<div class="np-box">
						<div class="np-border">
							<h2 class="np-title text-notWarp">标题：房管局的时刻牢记的疯狂拉升（字号18）</h2>
							<div class="np-tag">
								<p class="np-info">
									<span><i class="icon icon-good"></i>888</span>
									<span><i class="icon icon-msg"></i>999</span>
								</p>
								<p><img class="icon icon-time" src="images/s_03.png"/>2015-06-19(字号14)</p>
							</div>
							<p class="np-text text-warp">正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）</p>
						</div>
					</div>
				</a>
			</li>
			<li class="np-item">
				<a class="np-link" href="http://www.baidu.com/">
					<img class="banner-img" src="images/slides/slides1.jpg" />
					<div class="np-box">
						<div class="np-border">
							<h2 class="np-title text-notWarp">标题：房管局的时刻牢记的疯狂拉升（字号18）</h2>
							<div class="np-tag">
								<p class="np-info">
									<span><i class="icon icon-good"></i>888</span>
									<span><i class="icon icon-msg"></i>999</span>
								</p>
								<p><img class="icon icon-time" src="images/s_03.png"/>2015-06-19(字号14)</p>
							</div>
							<p class="np-text text-warp">正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）</p>
						</div>
					</div>
				</a>
				<a class="np-link" href="http://www.baidu.com/">
					<img class="banner-img" src="images/slides/slides1.jpg" />
					<div class="np-box">
						<div class="np-border">
							<h2 class="np-title text-notWarp">标题：房管局的时刻牢记的疯狂拉升（字号18）</h2>
							<div class="np-tag">
								<p class="np-info">
									<span><i class="icon icon-good"></i>888</span>
									<span><i class="icon icon-msg"></i>999</span>
								</p>
								<p><img class="icon icon-time" src="images/s_03.png"/>2015-06-19(字号14)</p>
							</div>
							<p class="np-text text-warp">正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）正文：房管局的时刻牢记的疯狂拉升（字号12）</p>
						</div>
					</div>
				</a>
			</li>
		</ul>
	</div>
	<!-- 底部 -->
	<div class="bottom-nav">
		<ul class="clear">
			<li class="bn-item">
				<h2 class="bn-title">联系我们</h2>
				<a class="bn-link left" href="http://www.baidu.com/">TEL:17756037679</a>
				<a class="bn-link left" href="http://www.baidu.com/">E-MAIL:nhm910924@163.com</a>
			</li>
			<li class="bn-item">
				<h2 class="bn-title">推荐板块</h2>
				<a class="bn-link center" href="http://www.baidu.com/">视频中心</a>
				<a class="bn-link center" href="http://www.baidu.com/">图文故事</a>
				<a class="bn-link center" href="http://www.baidu.com/">互动论坛</a>
			</li>
			<li class="bn-item">
				<h2 class="bn-title">关于我们</h2>
				<a class="bn-link center" href="http://www.baidu.com/">合作洽谈</a>
				<a class="bn-link center" href="http://www.baidu.com/">反馈建议</a>
			</li>
		</ul>
	</div>
</body>
<script type="text/jscript" src="js/public.js"></script>
<script type="text/jscript" src="js/slides.js"></script>
<script>
	$(function(){
		$('.nt-item,.nt-item-active').on('click mouseover',function(e){
			e.preventDefault();
			e.stopPropagation();
			
			var index = $(this).index();
			$(this).parent().children().attr('class','nt-item').eq(index).attr('class','nt-item-active');
			$('.new-panels').children().attr('class','np-item').eq(index).attr('class','np-item-active');
		});
			
		//窗口适应，防止奔溃
		$(window).resize(function(){
			var win_width = $(window).width();
			$('#slides-box, .header').css('width', win_width < 1000 ? '1000px' : '100%');
		});
		$(window).resize();
	});
</script>
</html>